<template>
  <sui-card>
    <sui-card-content extra style="height: 140px;height: 140px;display: flex;margin-left: 20px;">
      <div class="ui massive form">
        <div class="grouped fields">
          <div class="field">
            <div class="ui radio checkbox checked">
              <input type="radio" name="fruit" tabindex="0" class="hidden">
              <label>在校,空闲</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox ">
              <input type="radio" name="fruit" tabindex="0" class="hidden">
              <label>在校,忙碌</label>
            </div>
          </div>
          <div class="field">
            <div class="ui radio checkbox">
              <input type="radio" name="fruit" tabindex="0" class="hidden">
              <label>不在 学校</label>
            </div>
          </div>
        </div>
      </div>
    </sui-card-content>
  </sui-card>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import base64 from "@/mixins/base64";
export default {
  name: "zui-card",
  mixins: [base64],
  data() {
    return {
      baseUrl: process.env.BASE_URL,
      img: require("../assets/images/elliot.jpg")
    };
  },
  mounted() {
    const avator = this.authentication.user.user.privacy.avator;
    console.log(avator);
    const background = this.authentication.user.user.privacy.background;
    if (!localStorage.getItem("avator")) {
      console.log("localStorage没有avator的数据");
      if (avator) {
        console.log("avator有数据");
        this.getBase64(`${avator.fileDownloadUri}/base64`, "avator");
      } else {
        console.log("avator没有数据");
      }
    } else {
      console.log("localStorage有avator的数据");
    }
    if (!localStorage.getItem("background")) {
      console.log("localStorage没有background的数据");
      if (background) {
        console.log("background有数据");
        this.getBase64(`${background.fileDownloadUri}/base64`, "background");
      } else {
        console.log("background没有数据");
      }
    } else {
      console.log("localStorage有background的数据");
    }
  },
  computed: {
    ...mapGetters(["authentication"])
  },
  methods: {
    ...mapActions(["handleSidebar"]),
    siderShift(url) {
      this.$router.push(url);
      this.handleSidebar(false);
    }
  }
};
</script>
<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
.profile {
  box-sizing: border-box;
  display: table;
  margin: 14px 0 0 0;
  min-width: 100%;
  padding: 0;
  table-layout: auto;
}
.profile-stats {
  table-layout: fixed;
}
.profile-card {
  width: 1%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  overflow: hidden;
  transition: all 0.15s ease-in-out;
}
.profile-arrange {
  vertical-align: bottom;
  display: table-cell;
  padding: 0;
  vertical-align: top;
}
.ui.card,
.ui.cards > .card {
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #d4d4d5;
  margin-bottom: 0px;
  // cursor: pointer;
  // &:active {
  //   box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px rgba(152, 28, 235, 0.4);
  // }
}
.ui.card > .content,
.ui.cards > .card > .content {
  background-size: 100%;
  height: 95px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background-position: 0 50%;
  width: 100%;
  padding: 0;
  margin-top: -1px;
}
.ui.right.floated.image,
.ui.right.floated.images {
  background-color: #fff;
  border-radius: 50%;
  margin: -25px 8px 0 0;
  padding: 1px;
  vertical-align: bottom;
  display: inline-block !important;
  max-width: 100%;
  &:active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px rgba(152, 28, 235, 0.4);
  }
}
.ui.card .content img,
.ui.cards > .card .content img {
  border-radius: 50%;
  height: 72px;
  width: 72px;
  border: 2px solid #fff;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
}
</style>
